<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id"
        ><img :src="'http://www.xiaoshuaipeng.com:8080' + item.imgSrc" alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- 四个出租 -->
    <van-grid :border="false">
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="location-o" text="地图找房" />
      <van-grid-item icon="wap-home" text="去出租" />
    </van-grid>
    <!-- 租房小组 -->
    <div class="house">
      <p class="more"><span class="weight">租房小组</span><span>更多</span></p>
      <div class="groups">
        <div class="item-top">
          <div class="item-itm" v-for="item in homegroup" :key="item.id">
            <div class="left">
              <p class="pop">{{ item.title }}</p>
              <p>{{ item.desc }}</p>
            </div>
          <div class="right">
            <img
              :src="'http://www.xiaoshuaipeng.com:8080' + item.imgSrc"
              alt=""
            />
          </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新咨询 -->
    <div class="news-group">
      <!-- <p class="p-header">最新咨询</p> -->
   <strong>最新咨询</strong>
      <div class="list" v-for="item in news" :key="item.id">
        <div class="left">
          <img
            :src="'http://www.xiaoshuaipeng.com:8080' + item.imgSrc"
            alt=""
          />
        </div>
        <div class="right">
          <p class="top-from">{{ item.title }}</p>
          <p class="from">
            <span>{{ item.from }}</span>
            <span>{{ item.date }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwiper, getGroups, getNews } from '@/api-ajax/house.js'

export default {
  data () {
    return {
      swiperList: [],
      HomeGroups: 'AREA|88cff55c-aaa4-e2e0',
      homegroup: [],
      news: []
    }
  },
  async created () {
    // const { data } = await instance.get('/home/swiper')
    const { data } = await getSwiper()
    // console.log(data.body)
    this.swiperList = data.body
    const { data: res } = await getGroups()
    // console.log(res.body)
    this.homegroup = res.body
    const { data: res2 } = await getNews()
    // console.log(res2.body)
    this.news = res2.body
    // console.log(data2)
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;

  height: 212px;
  img {
    width: 100%;
  }
}
.house {
  padding: 10px 10px 0 10px;
  background-color: #f6f5f6;
  .more {
    padding: 0 5px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    .weight {
      font-weight: 700;
    }
  }
  .groups {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    background-color: #f2eded;
    width: 100%;
    height: 180px;
    .item-top {
      width: 100%;
      height: 100%;
      display: flex;
      // background-color: #fff222;
      flex-wrap: wrap;
      .item-itm {
        background-color: #fff;
        margin-bottom: 10px;
        width: 48.5%;
        margin-right: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .left {
          color: #999;
          font-size: 12px;
          font-weight: normal;
          .pop {
            font-size: 14px;
            font-weight: 700;
            color: #333;
          }
        }
        .right {
          width: 55px;
          img {
            width:100%;
          }
        }
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
}
.news-group {
  padding-bottom: 50px !important;
  padding: 10px;
  padding: 10px;
  // .p-header {
  //   padding-left: 10px;
  //   font-weight: 700;
  // }
  .list {
    border-bottom: 1px solid #ccc;
    padding: 10px;

    display: flex;
    .left {
      width: 120px;
      img {
        width: 100%;
      }
    }
    .right {
      padding: 0 5px;
      display: flex;
      flex-direction: column;
      flex: 1;
      font-size: 14px;
      justify-content: space-between;
      .top-from {
        font-weight: 700;
      }
      .from {
        color: #9c9fa1;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
